<template>
  <div>
    <p v-color="color">这里需要改变颜色</p>
    <button @click="color='purple'">点击改变颜色</button>
  </div>
</template>

<script>
export default {
  directives:{
    color:{
       // inserted 是绑定的 DOM 插入到页面时执行的函数, 只会执行一次, 后期如果指令的值发生变化也不会再执行了
      // 参数1: 指令绑定的元素
      // 参数2: 参数对象
      // 参数也是可以解构赋值的, 只要参数是对象或数组就可以
      inserted(el,{value}){
        el.style.color = value
      },
      update(el,binding){
        el.style.color = binding.value
      }
    }
  },
  data(){
    return{
      color:'pink'
    }
  }
}
</script>

<style>

</style>